<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>04_Vue的options-data属性选项</title>
  <!-- 
  在 Vue 中， `data`  属性是一个选项，用于定义组件的响应式数据。 `data`  选项可以是一个函数或一个对象，主要用于存储组件的状态信息。
  1.  `data`  属性的基本用法
  - 对象语法：在组件中直接定义一个对象，适用于简单的组件。
  export default {
    data() {
      return {
        message: 'Hello, Vue!',
        count: 0,
      };
    },
  };
  - 函数语法：在组件中使用一个函数返回对象，适用于需要创建多个实例的情况。每个实例都有独立的状态。
  export default {
    data() {
      return {
        message: 'Hello, Vue!',
        count: 0,
      };
    },
  };
  2. 响应式数据
  在 Vue 中， `data`  中定义的所有属性都是响应式的。这意味着当数据变化时，视图会自动更新。

  - 示例：
  <template>
    <div>
      <p>{{ message }}</p>
      <button @click="increment">增加</button>
    </div>
  </template>

  <script>
  export default {
    data() {
      return {
        message: 'Hello, Vue!',
        count: 0,
      };
    },
    methods: {
      increment() {
        this.count++;
        this.message = `当前计数：${this.count}`;
      },
    },
  };
  </script>

  3. 访问和修改数据
  在组件内部，可以通过  `this`  关键字访问  `data`  中的属性。使用  `this.propertyName`  的方式可以读取和修改数据。

  - 示例：
  methods: {
    changeMessage() {
      this.message = 'Hello, World!';
    },
  },
  4. 数据初始化

  `data`  中定义的数据会在组件实例化时初始化。可以在  `mounted`  或  `created`  生命周期钩子中对数据进行进一步的处理。

  - 示例：
  created() {
    this.count = 10; // 初始化计数为 10
  },

  5. 组合式 API 的影响
  在 Vue 3 中，组合式 API 提供了  `reactive`  和  `ref`  来替代  `data` ，但在选项式 API 中， `data`  仍然是定义响应式数据的重要方式。

  总结
  -  `data`  属性：用于定义组件的响应式数据，支持对象和函数语法。
  - 响应式特性： `data`  中的数据变化会自动更新视图。
  - 访问和修改：通过  `this`  关键字访问和修改数据。
  - 数据初始化：可以在生命周期钩子中初始化数据。
  - 组合式 API：Vue 3 引入了新的响应式数据管理方式，但选项式 API 中的  `data`  仍然重要。
  -->
</head>
<body>

  <div class="app">
    <h1>{{ message }}</h1>
    <p>{{ count }}</p>
    <button @click="increment">增加计数</button>
  </div>

  <script src="../lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      // data: option api
      data() {
        return {
          message: 'Hello, Vue!',
          count: 0,
        };
      },
      // methods: option api
      methods: {
        increment() {
          this.count++;
          this.message = `当前计数：${this.count}`;
        },
      },
    });
    app.mount('.app');
  </script>
  
</body>
</html>